<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .my-card {
        display: flex;
        flex-direction: column;
        width: 300px;
        border: 1px solid #000;
        border-radius: 5px;
        box-shadow: 0 10px 10px #000;
      }

      .my-card__header {
        height: 44px;
        border-bottom: 1px solid #000;
      }

      .my-card__body {
        flex: 1;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <!-- 
      具名插槽:
        组件内可以有多个插槽出口，想要实现不同的出口渲染不同的内容就需要给这些出口添加名字

      v-slot:参数
        参数就对应这 slot 的 name
        1. 该指令在 Vue 2.6 版本中新增。
        2. v-slot 的简写方式是 一个 #
          v-slot:header  => #header

      v-slot指令出来之前如何玩具名插槽呢？(PS: Vue3 之后老的语法直接给移除了。)
        slot="xxx"        - 具名插槽
        slot-scope="xxx"  - 插槽作用域
   -->

    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <my-dialog>
            <template #header>
              <h1>Hello</h1>
            </template>

            <template #body>
              <h2>World</h2>
            </template>

            <template #footer>
              <h3>Hello World</h3>
            </template>
          </my-dialog>

          <my-card header="卡片1">
            <template v-slot:default>
              <input type="text" />
            </template> 
            
            <template v-slot:header>
              <div style="display: flex; justify-content: space-between;">
                <p>自定义头部</p>  
                <p>x</p>
              </div>  
            </template>
          </my-card>

          <my-card header="卡片2">
            <img src="https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_1.jpeg" />  
          </my-card>
        `,

        data() {
          return {
            name: "张三",
          };
        },
      });

      app.component("my-dialog", {
        template: `
          <div>
            <div class="header">
              <slot name="header" />  
            </div>  

            <div class="body">
              <slot name="body" />  
            </div>  

            <div class="footer">
              <slot name="footer" />  
            </div>  
          </div>
        `,
      });

      app.component("my-card", {
        props: {
          header: {
            type: String,
            default: "标题",
          },
        },
        template: `
          <div class="my-card">
            <div class="my-card__header">
              <slot name="header">
                <div class="my-card-title">{{ header }}</div> 
              </slot>
            </div>
            <div class="my-card__body">
              <slot />
            </div>
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
